<template>
	<view class="px-2">
		<template v-if="userInfo !== ''">
			<view class="flex justify-between align-center py-2" hover-class="bg-light" @click="toset">
				<view class="flex">
					<image :src="userInfo.userpic" v-if="userInfo.userpic !== null" style="width: 100rpx; height: 100rpx" mode="aspectFill" class="rounded-circle"></image>
					<image v-else src="@/static/image/moren.png" style="width: 100rpx; height: 100rpx" mode="aspectFill" class="rounded-circle"></image>

					<view class="flex-column pl-1 justify-between">
						<text class="font-md font-weight-bold">{{ userInfo.nikeName }}</text>

						<view class="flex align-center">
							<text class="font-sm text-muted">总帖子 {{post}}</text>
						</view>
					</view>
				</view>

				<view class="">
					<text class="iconfont icon-youjiantou"></text>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="flex justify-center py-2 align-center font-lg" style="color: red" hover-class="bg-light" @click="login">去登录</view>
		</template>
		<view class="flex justify-around align-center py-2">
			<view class="flex flex-column align-center">
				<text class="font-weight-bold font-md">{{ post }}</text>
				<text class="font-sm text-dark">帖子</text>
			</view>
			<view class="flex flex-column align-center animated" hover-class="tada" @click="openuserlist(0)">
				<text class="font-weight-bold font-md">{{ friend }}</text>
				<text class="font-sm text-dark">朋友</text>
			</view>
			<view class="flex flex-column align-center animated" hover-class="tada" @click="openuserlist(1)">
				<text class="font-weight-bold font-md">{{ follow }}</text>
				<text class="font-sm text-dark">关注</text>
			</view>
			<view class="flex flex-column align-center animated" hover-class="tada" @click="openuserlist(2)">
				<text class="font-weight-bold font-md">{{ fenshi }}</text>
				<text class="font-sm text-dark">粉丝</text>
			</view>
		</view>

		<view class="py-3">
			<image src="../../static/image/th.jpg" class="w-100" style="border-radius: 20rpx; height: 170rpx" mode="aspectFill"></image>
		</view>
		<view class="">
			<block v-for="(item, index) in list" :key="index">
				<view class="flex justify-between align-center py-3" hover-class="bg-light" @click="open(index)">
					<view class="flex align-center">
						<text class="iconfont font-md" :class="item.icon"></text>
						<view class="pl-2">
							{{ item.title }}
						</view>
					</view>
					<view class="">
						<text class="iconfont icon-youjiantou text-muted"></text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
import { getuserpage } from '@/request/Api/user.js';
export default {
	data() {
		return {
			list: [
				{
					icon: 'icon-liulan',
					title: '浏览历史'
				},
				{
					icon: 'icon-renzheng',
					title: '社区认证'
				},
				{
					icon: 'icon-shenpishenhe',
					title: '审核帖子'
				}
			],
			friend: 0,
			post: 0,
			follow: 0,
			fenshi: 0,
			userInfo: ''
		};
	},
	onShow() {
		this.userInfo = uni.getStorageSync('userInfo');
		if (this.userInfo) {
			getuserpage({ userId: this.userInfo.id }).then((res) => {
				this.friend = res.data.friendNum;
				this.post = res.data.postNum;
				this.follow = res.data.followNum;
				this.fenshi = res.data.fenshiNum;
			});
		}
	},
	methods: {
		open(index) {
			if(index===0)
			{
				uni.navigateTo({
					url:'/pages/history/history'
				})
			}
		},
		login() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},
		openuserlist(index) {
			uni.navigateTo({
				url: '/pages/user-list/user-list'
			});
		},
		toset() {
			uni.navigateTo({
				url: '../set/set'
			});
		}
	},
	onNavigationBarButtonTap() {
		this.toset();
	}
};
</script>

<style lang="scss"></style>
